<style>
    .layui-input {
        background: #F5F6F7;
        height: 32px;
        width: 200px;
    }

    .layui-form-label {
        line-height: 30px;
        padding: 0;
        text-align: center;
    }

    .model-form {
        padding-right: 0;
    }

    .model-form-footer {
        padding-right: 24px;
    }

    #upload, #demo1 {
        width: 35px;
        height: 35px;
        border-radius: 80%;
        background: #F5F6F7;
        padding: 0;
    }

</style>

<form id="businessUser-form" lay-filter="businessUser-form" class="layui-form model-form">
    <input name="user_id" type="hidden"/>
    <input name="edtCode" type="hidden"/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                <img class="layui-upload-img" id="demo1">
                <button type="button" class="layui-btn" id="upload">
                    <i class="layui-icon" style="color: #778192; text-align: center; margin: 0">&#xe624;</i>
                </button>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input name="nickname" placeholder="" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <input name="username" placeholder="" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="0">启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <input name="phone" placeholder="" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="sex">
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item" id="password">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input name="mima" placeholder="" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required/>
            </div>
        </div>
    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn" lay-filter="businessUser-form-submit" lay-submit style="background: #38B7CB;
">确定
        </button>
        <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
    </div>
</form>

<script>
    layui.use(['form', 'admin', 'layer', 'upload', 'config'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            config = layui.config,
            fileData = '',
            admin = layui.admin;

        form.render('select');

        // 回显user数据
        var businessUser = admin.getTempData('t_user');
        console.log(businessUser)
        $('#businessUser-form').attr('method', 'POST');
        if (businessUser.user_id) {
            form.val('businessUser-form', businessUser);
            $("#password").hide();
            $('#demo1').attr('src', businessUser.photo);
            $('#businessUser-form').attr('method', 'POST');
        }

        var uploadInst = upload.render({
            elem: '#upload',
            url: config.base_server + 'api-file/api/file/upload?access_token=429d363e-0637-4c97-bd9f-d349f5d4b159', //改成您自己的上传接口
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res, index, upload) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                fileData = res.data.url;
                layer.msg('上传成功', {icon: 16, time: 300});
            },
            error: function () {

            }
        });

        // 表单提交
        form.on('submit(businessUser-form-submit)', function (data) {
            console.log(data.field)
            layer.load(2);
            data.field.photo = fileData ? fileData : data.field.photo;
            if (data.field.user_id) {
                admin.req('api-sys/api/sysUser/update', JSON.stringify(data.field), function (data) {
                    layer.closeAll('loading');
                    if (data.code == 0) {
                        layer.msg(data.msg, {icon: 1, time: 500});
                        admin.finishPopupCenter();
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 500});
                    }
                }, 'PATCH');
            } else {
                data.field.entCode = businessUser.entCode;
                admin.req('api-sys/api/sysUser/add', JSON.stringify(data.field), function (data) {
                    layer.closeAll('loading');
                    if (data.code == 0) {
                        layer.msg(data.msg, {icon: 1, time: 500});
                        admin.finishPopupCenter();
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 500});
                    }
                }, 'POST');
            }
            return false;
        });
    })
</script>